Symbols are the building blocks to Flash and allow for the file size to be much smaller so that the download rate is quicker.  After creating a symbol, you can learn to use them for buttons to link to other pages, as well as add animation to your site.  The tutorial on drawing that comes with Flash does a very good job with explaining how to draw a picture and add text.  You can also import pictures by going to file; import. If you import a gif, make sure you import it into a movie symbol. What happens if you want this picture to move/animate or become a link?

You will notice that you can click certain parts or all of a picture you make in flash and it will become highlighted with a checkerboard overlay.  You may also need to double click the image to include the border around a given image to be included in the symbol.  Click insert; and then "convert to symbol".  You can select among 3 choices.

Graphic - this is mainly for pictures and setting up buttons or movies to become more controllable.  Use the toolbar on the left to create your graphic image, or import a picture.

Button - window; library; select graphic or movie symbol

Buttons allow for a graphic and movie symbol or text to become clickable.  Make it a common practice to make a graphic symbol first, then bring that symbol into a new button symbol.  Even though you can directly make a button without inserting a graphic symbol, by making a graphic symbol first you can control how that image is displayed through the instance properties.  After selecting a symbol, and inserting it into a button symbol, you can then go to modify; instance.  Then select under the "color effect" tab brightness; tint; alpha; or special.

There are 4 states to a button: up, over, down, and hit.  When you click on the last 3 states, you must create what is called a keyframe.  Keyframes signify the location of where you make any of your major changes.  A keyframe with an outlined "o" identify that there is nothing current to be viewed when played, and a filled "o" shows that something has been inserted into that frame.   After making an image for the initial state of your button at the "Up" state, click the "over" area, and then go to insert; keyframe.  Now you can insert another image for when people hover their mouse over the area of the image in the "up" frame.   Follow the same method for down and hit to modify what appears when people click the image.  It is important to note that when viewing the movie in flash, you will not see actions of any clicks take place (the flash file must be published and accessed in a browser to see the links in action).  In addition, when working with the canvas, only the initial state of a button is first displayed.  To see the button effects in Flash while working in the canvas, go to control; enable frame actions or buttons.

Movie - a movie symbol lets you do several things.  You can create an ongoing animation of something while making the rest of the flash movie in the canvas static.   They can be used for buttons as well as using graphic symbols.  To accomplish this, you must know how to "tween".

Tweening is made when 2 key frames are established, and there are frames in between to allow for the tween.  The flash tutorial on tweening is good, so make sure you go over it as well as here.  To make a tween follow these steps:

1. Establish the keyframes.  Goto to frame 1 and insert a graphic symbol.   Then go to frame 10, and insert a new keyframe.

2. Assign the tween.  Go back to frame 1, and select modify; frame; motion or shape.  Select motion if you want the image to merely move (including size change) or rotate. Then move either the image in the first or last keyframe of the tween.  If you press enter you will see it move.  However, if you want the image to change its shape for example from a circle to a triangle, then you will select shape and bring in a second graphic symbol (putting one symbol on each keyframe of the tween). You will also have to break apart the images to make a shape tween.  To do this, at both keyframes go to modify; break apart.  When tweening the shape of text, you must break apart the text twice. 

Despite the shape tween just mentioned, as a general rule, you will usually only need to edit the properties for the keyframe that starts the tween, not both.

The canvas is where the movie is made incorporating the 3 types of symbols discussed above.  You can get away without using any symbols at times, but it becomes harder to control and you will see the canvas can become quite cluttered.  By sticking to symbols, you are sure to help organize yourself.

The canvas is made up of a series of layers, allowing you to put symbols on top of each other, or simply edit one part of the movie at one given frame without effecting the rest.   By going to the image of a lock (left of the first keyframe), you can select everything in that layer to be locked so that you can move symbols in other layers around.   The eye to the left of it can be clicked so you can view the animation without anything in that layer to appear.

By doing a right click on that area, you can add layers (or click the "+" icon below the layer names).  The higher layers will cover the lower ones.  Keep this in mind when arranging your movie.  Since you cannot convert 2 layers in the canvas to a symbol, try to make it a practice of not only inserting graphic symbols into movie and button symbols, but also that you make layers in your movie symbol.  Then bring that movie symbol into the canvas which would only need one layer.  You will get the same effect and less layers to manage.  Flash 4 has a library system so that organization is easy to do.  Go to window; library.  Then at the bottom left of that library window is a icon for a folder.  Click that and you can now organize your symbols into groups (like buttons, movies, etc..).  A trash icon to the right of that folder icon allows you easy deletion as well.

Project 1 (your first button, this one you have to hold the mouse down to see the effect) - make a symbol for a graphic, a button, and one for a movie symbol.   When making the button and movie symbol, insert the graphic symbol into both movie and button symbol, but bring only the button symbol into the canvas area. 

An example would be for you to have your name appear as the initial frame in a button symbol, and then when you hover over the name, a circle with your favorite color appears.   Then when you hold down the mouse over the circle, it moves or changes shape to a rectangle.  (hint: to do the circle to rectangle, you will need to make 2 graphic symbols, one for the circle and one for the rectangle, and don't forget to break them apart.)  This can all be done in one frame of the canvas area. 

Click here to view it.  If you want the .fla, contact me.

Instance Actions - modify; instance; actions

After learning how to create the symbols and show how they can work, you are ready to develop a better understanding of how flash works.  For example, what if we wanted the above button to show the shape tween, but just after clicking it and not having to hold it down to see the effect?

Project 2 You will need to make a button consisting of at least an image for the initial state (hover and click frames are optional).  Also, have a movie symbol ready or plan to make one in the canvas area with 2 graphic symbols.   Insert your button into frame 1 and you are ready to begin the new steps.

1. Determine how many frames it took or will take for the shape tween to occur.   In this case, the movie symbol had 15 frames.  You will need 2 more to work with the button, so 17 total frames are needed.  Go to frame 17, click insert; frame (not keyframe). Then make a keyframe at frame 3.

2. Next is to add a "goto" action.   This simply creates a loop for flash to play the button in frame 1 over and over again until it is clicked.  To do this, you add a keyframe also to frame 2.   Then go to modify; frame; actions; click the + sign; select go to. A new window appears.  Simply check the box to the bottom right labeled "Go to and Play".  Keep in mind though above that area where you see "frame number" is where you select the frame you want the movie to go.  In this case frame 1 is already selected, but you may want to later change this.  After you click ok, you will see a small "a"  in the layer indicating you set up a frame action.

3. Go to frame 1, and this time you will edit the instance properties on the button.   Click modify; instance; actions; on mouse event.  A new window pops up and on the right you can choose what mouse action will trigger to play the movie symbol.  In this case, release will be checked which means clicked.  Then click + like before and go to.  This time where it shows frame number as 1, change it to 3.  Check the box labeled "Go to and Play".

Now the button part is set up, but you still have to set up the animation effect after it is set up.  If you made a movie symbol, insert it in frame 3 (skip to next paragraph). If you didn't, create a blank keyframe, click insert; blank keyframe in frame 3.  Then make sure that 3rd frame is selected and insert your graphic symbol there. Go to frame 17, make a blank keyframe, and insert the second graphic symbol you want the first one to tween to.  Remember to break them both apart and create the shape tween.

Now it should be set up to cycle. You will most likely have to work with positioning the symbols for right now so that the movie symbol and button symbol are matched up.  

Click here to view what it would look like.  If you want the .fla for it, contact me.